﻿<template>
     <el-dialog :close-on-click-modal="false" :close-on-press-escape="false" title="编辑" :append-to-body="true" :visible="modalEdit" @close="modalEdit=false" @opened="opened" @closed="closed">
        <el-form ref="sysUser"  label-position="left" label-width="120px" :model="sysUser" :rules="rules">
            <input type="hidden" :model="sysUser.id" />
             <el-form-item label="头像" prop="thumb">
                <ErpImage v-model="sysUser.thumb" />
            </el-form-item>
            <el-form-item label="真实姓名" prop="realName">
                <el-input size="small" v-model="sysUser.realName" placeholder="真实姓名" style="width: 240px" />
            </el-form-item>
            <el-form-item label="上级领导" prop="parentId">
                <el-input size="small" v-model="sysUser.parentId" placeholder="上级领导" style="width: 240px" />
            </el-form-item>
            <el-form-item label="角色" prop="roleId">
                <el-select size="small" filterable v-model="sysUser.roleId" placeholder="角色" style="width: 240px">
                    <el-option v-for="role in roles" :key="role.id" :value="role.id" :label="role.roleName">{{role.roleName}}</el-option>
                    <!--  <el-option :value="2" label="业务助理">业务助理</el-option>
                    <el-option :value="3" label="管理员">管理员</el-option>
                   -->
                </el-select>
                <el-button circle size="small" :loading="roleLoading">刷新</el-button>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
                <el-input size="small" v-model="sysUser.phone" placeholder="电话" style="width: 240px" />
            </el-form-item>
            <el-form-item label="邮件" prop="email">
                <el-input size="small" v-model="sysUser.email" placeholder="邮件" style="width: 240px" />
            </el-form-item>
            <el-form-item label="微信" prop="wechat">
                <el-input size="small" v-model="sysUser.wechat" placeholder="微信" style="width: 240px" />
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-radio-group size="small" v-model="sysUser.state">
                    <el-radio :label="1">启用</el-radio>
                    <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <template v-if="!sysUser.id">
                <el-form-item label="登录名" prop="loginName">
                    <el-input size="small" v-model="sysUser.loginName" placeholder="登录名" style="width: 240px" />
                </el-form-item>
            </template>
            <el-form-item label="密码" prop="passport">
                <el-input size="small" v-model="sysUser.passport" placeholder="密码" style="width: 240px" />
            </el-form-item>
        </el-form>
        <div slot="footer">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" :loading="modalLoading" @click="ok">确定</el-button>
        </div>
    </el-dialog>
    </div>
</template>
<script>
export default {
    name: 'SysUser',
    data() {
        return {
            roleLoading: false,
            modalEdit: false,
            modalLoading: false,
            sysUserId: "",
            sysUser: {
                state: 1,
                passport: "a123456"
            },
            roles:[],
            rules: {
                realName: [{ required: true, message: "真实姓名必填" }],
                roleId: [{ required: true, message: "角色必选" }],
                phone: [{ required: true, message: "电话必填" }],
                loginName: [{ required: true, message: "登录名必填" }],
                passport: [{ required: true, message: "密码必填" }],
                state: [{ required: true, message: "状态" }]
            }
        };
    },
    mounted: function() {
        this.getDetail();

    },
    methods: {
        
        opened() {

            this.getDetail();
            this.getRoles();
        },
        closed: function() {
            this.sysUser = {
                state: 1,
                passport: "a123456"
            }
        },
        showDialog(id) {
            this.sysUserId = id;
            this.modalEdit = true;
        },
        getDetail: function() {
            if (this.sysUserId == null || this.sysUserId == undefined || this.sysUserId == "") return;
            var me = this;
            me.showLoading();
            me.$http.post("/sys/sysuser/show_" + me.sysUserId + ".action").then(response => {
                var body = response;
                if (body.status == 0) {
                    me.sysUser = body.obj;

                }
                me.hideLoading();
            }, response => {
                me.hideLoading();
            });
        },
        getRoles: function() {
            this.roleLoading = true;
            this.$http.post("/sys/sysrole/search.action", {}).then(response => {
                this.roleLoading = false;
                var body = response;
                if (body.status == 0) {
                    this.roles = body.obj;
                } else {
                    this.errorMessage(body.info);
                }
            }, response => {
                this.roleLoading = false;
            });
        },
        ok: function() {
            var ok = false;
            this.$refs['sysUser'].validate((valid) => {
                ok = valid;
                if (valid) {

                } else {
                    this.errorMessage('请认真填写数据');
                }
            })
            if (!ok) return;
            var me = this;
            me.modalLoading = true;
            me.$http.post("/sys/sysuser/doSave.action", me.sysUser).then(response => {
                var body = response;
                if (body.status == 0) {
                    me.successMessage("保存成功！");
                    me.modalEdit = false;
                    me.$emit("ok");

                } else {
                    me.errorMessage(body.info);
                }
                me.modalLoading = false;
            }, response => {
                me.modalLoading = false;
            });
        },
        cancel: function() {
            this.sysUser = {};
            this.modalEdit = false;
            this.$emit("cancel");
        }
    }
}
</script>
<style scoped>
</style>